<!DOCTYPE html>
<html lang="zh-cn">

<head>

  <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

  <title>滑雪族 - 教练预约</title>

  <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
  <!-- Timeline CSS -->
  <!-- Morris Charts CSS -->
  <!-- Bootstrap DateRangePicker CSS -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" href="/server/r/static/css/timeline_1c13c9f.css" />
    <link rel="stylesheet" href="/server/r/bower_components/morrisjs/morris.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/bower_components/select2/dist/css/select2.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
</head>

<body>
<div id="wrapper">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>
  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h3 class="page-header">预约查询</h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="form-inline">
      <div class="form-group">
        <label>产品：</label>
        <select class="form-control" id="coach-activity"></select>
      </div>
      <div class="form-group" id="episode-form-group" style="display: none;">
        <label>子项目：</label>
        <select class="form-control" id="coach-episode"></select>
      </div>
    </div>
    <div class="form-inline">
      <div class="form-group">
        <label>预约时间：</label>

        <div class="input-group" id="start-date">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          </span>
          <input type="text" class="form-control input-sm" readonly placeholder="请选择查询区间起点" style="width: 150px;">
        </div>
        <label> ~ </label>

        <div class="input-group" id="end-date">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          </span>
          <input type="text" class="form-control input-sm" readonly placeholder="请选择查询区间终点" style="width: 150px;">
        </div>
      </div>
      <input type="hidden" id="start-time" name="startTime">
      <input type="hidden" id="end-time" name="endTime">

      <div class="form-group">
        <label>状态：</label>
        <select class="form-control" id="order-status"></select>
      </div>
      <div class="form-group">
        <a id="coach-filter" type="button" class="btn btn-sm btn-success btn-outline">查询</a>
        <a href="/manage/coach-list" type="button" class="btn btn-sm btn-success btn-outline">全部</a>
        <a id="export-excel" type="button" class="btn btn-sm btn-success">导出excel</a>
      </div>
    </div>
    <div class="form-inline">
      <div class="form-group">
        <label>主办方：&nbsp;&nbsp;&nbsp;</label>
        <select class="form-control" id="coach-organizer"></select>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            预约列表
            <div class="pull-right">
              累计金额：<label id="playCash"></label> 元
            </div>
          </div>
          <!-- /.panel-heading -->
          <div class="panel-body">
            <div class="dataTable_wrapper">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr class="warning">
                  <th>订单号</th>
                  <th>产品</th>
                  <th>子项目</th>
                  <th>票种</th>
                  <th>价格</th>
                  <th>姓名</th>
                  <th>电话</th>
                  <th>预约时间</th>
                  <td>状态</td>
                </tr>
                </thead>
                <tbody id="coach-list-body"></tbody>
              </table>
            </div>

            <!-- /.row -->
            <div class="pagination dataTables_paginate paging_simple_numbers pull-right" id="pagination" role="status"
                 aria-live="polite">
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
  <!-- /#page-wrapper -->

  <!-- /#wrapper -->  <script id="tpl-coach-list-item" type="text/template">
    <tr>
      <td>{{code}}</td>
      <td>{{title}}</td>
      <td>{{name}}</td>
      <td>{{charge_name}}</td>
      <td>{{total_price}}</td>
      <td>{{real_name}}</td>
      <td>{{phone}}</td>
      <td>{{datetime(appointment_time)}}</td>
      <td>{{Status2String(status)}}</td>
    </tr>
  </script>
  <div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script>/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155",
  "r/bower_components/async/dist/async.min": "/server/r/bower_components/async/dist/async.min",
  "r/bower_components/moment/min/moment-with-zh-cn.min": "/server/r/bower_components/moment/min/moment-with-zh-cn.min",
  "r/vendor/pagination/jquery.pagination": "/server/r/vendor/pagination/jquery.pagination",
  "r/bower_components/bootstrap-daterangepicker/daterangepicker": "/server/r/bower_components/bootstrap-daterangepicker/daterangepicker"
}});

    require(["r/bower_components/jquery/dist/jquery.min", "r/static/js/hxz/hxz", "r/bower_components/async/dist/async.min", "r/static/js/alertify-config", "r/bower_components/moment/min/moment-with-zh-cn.min", "r/vendor/pagination/jquery.pagination", "r/bower_components/select2/dist/js/select2", "r/bower_components/bootstrap-daterangepicker/daterangepicker"], function ($, hxz, async, alertify, moment) {

      var pagination = {};
      var coachListFilter = {};

      var $startDate = $('#start-date');
      var $endDate = $('#end-date');

      var $startDateInput = $('#start-date input');

      var $endDateInput = $('#end-date input');

      var $startTime = $('#start-time');
      var $endTime = $('#end-time');

      var $coachOrganizer = $("#coach-organizer");

      function fetchOption() {

        hxz.doGet({url: hxz.RestApi.manageOrgOption + "?type=32"}, function (org) {

          $("#coach-organizer").select2({
            language: "zh-CN",
            placeholder: "请选择主办方",
            width: "200",
            data: org.data
          });

          hxz.activityOptionGroup("#coach-activity", "#coach-episode", 32, 1);

          var statusData = [
            {"id": 999, "text": "全部"},
            {"id": 0, "text": "未支付"},
            {"id": 1, "text": "已支付"},
            {"id": 5, "text": "已完成"}
          ];

          $("#order-status").select2({
            language: "zh-CN",
            placeholder: "订单状态",
            width: "100",
            data: statusData
          });

        });

      }


      /**
       *初始化分页控件 需要页面上包含<div id="pagination"></div>
       */
      function pagination(data, callback) {
        $('#pagination').pagination(count, {
          current_page: 0,
          items_per_page: 10,
          num_display_entries: 6,
          callback: function (page) {
            //模拟ajax去后端读取页数，获取数据并渲染列表的过程
            callback(page + 1);
          },
          load_first_page: false,
          prev_text: '上一页',
          next_text: '下一页'
        });

      }


      function fetchCoachList(page) {
        var apiCoachList = hxz.RestApi.manageCoachList;
        coachListFilter.page = page;

        if ($("#order-status").val() !== "" && $("#order-status").val() != "999") {
          coachListFilter.status = $("#order-status").val();
        }

        if ($startTime.val() != "") {
          coachListFilter.startTime = $startTime.val();
        }
        if ($endTime.val() != "") {
          coachListFilter.endTime = $endTime.val();
        }
        if ($startTime.val() != "" && $endTime.val() != "") {
          if ($startTime.val() > $endTime.val() != "") {
            return alertify.log("预约检索的开始时间不能大于结束时间！");
          }
        }
        if ($coachOrganizer.val() != "") {
          coachListFilter.organizerId = $coachOrganizer.val();
        }


        hxz.doGet({url: hxz.getUrlByfiterOption(apiCoachList, coachListFilter)}, function (data) {

          if (data.status == "0") {
            return alertify.log("系统错误");
          }
          if (data.data.cash) {
            $("#playCash").html("").append(data.data.cash.substring(0, data.data.cash.length - 2));
          } else {
            $("#playCash").html("").append(0);
          }
          render(data.data.list.dataList, page, data.data.list.count);
        });
      }


      function render(dataList, page, count) {
        var tpl = _.template($('#tpl-coach-list-item').html());
        $("#coach-list-body").html("");
        for (var i = 0; i < dataList.length; i++) {
          var _data = dataList[i];
          _data.index = hxz.pageIndex(i, page);
          _data.datetime = hxz.datetime;

          _data.Status2String = function (data) {
            data = Number(data);
            return hxz.orderStatus(data);
          };
          $("#coach-list-body").append(tpl(_data));
        }

        if (pagination) {
          pagination = false;
          $('#pagination').pagination(count, {
            current_page: 0,
            items_per_page: 10,
            num_display_entries: 6,
            callback: function (page_id) {
              //模拟ajax去后端读取页数，获取数据并渲染列表的过程
              fetchCoachList(page_id + 1);
            },
            load_first_page: false,
            prev_text: '上一页',
            next_text: '下一页'
          });
        }
      }

      function event() {

        $("#export-excel").unbind("click").on("click", function () {
          if ($("#coach-episode").val() && $("#coach-episode").val() != "0") {
            if ($("#order-status").val() && $("#order-status").val() != "") {
              var status = $("#order-status").val();

              if (status === "999") {
                status = "";
              }
              window.open("/server/export-player-by-episode?episodeId=" + $("#coach-episode").val() + "&status=" + status);
            } else {
              return alertify.log("请选择支付状态，若全部导出请选择全部！");
            }
          } else {
            return alertify.log("请选择到具体的产品！");
          }
        });
        $("#coach-filter").unbind("click").on("click", function () {
          coachListFilter = {};
          coachListFilter.activityId = ($("#coach-activity").val() === "0") ? "" : $("#coach-activity").val();
          coachListFilter.episodeId = ($("#coach-episode").val() === "0") ? "" : $("#coach-episode").val();
          pagination = true;
          fetchCoachList(1);
        });

        moment.locale('zh-cn');
        var commDateConfig = {
          startDate: new Date(),
          locale: {
            format: 'YYYY年MM月DD日',
            separator: ' - ',
            applyLabel: '确定',
            cancelLabel: '关闭',
            weekLabel: 'W',
            customRangeLabel: 'Custom Range',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek()
          }
        };
        commDateConfig.singleDatePicker = true;
        $startDate.daterangepicker(commDateConfig, function (start, end, label) {
          $startDateInput.val(hxz.date(start));
          var sDate = new Date(start);
          $startTime.val(sDate.getTime());
        });
        var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        $startDateInput.val(hxz.date(tomorrow));
        $startTime.val(tomorrow.getTime());

        $endDate.daterangepicker(commDateConfig, function (start, end, label) {
          $endDateInput.val(hxz.date(start));
          // start 和 end 是moment对象
          var sDate = new Date(start);
          $endTime.val(sDate.getTime());
        });

        $endDateInput.val(hxz.date(tomorrow));
        $endTime.val(tomorrow.getTime());
      }

      function pageInit() {
        pagination = true;
        fetchOption();
        event();
        $("#order-status").val("1").trigger("change");
        fetchCoachList(1);
      }

      // 执行初始化
      pageInit();

    });


  </script>
</body>
</html>